<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/Views/Common/header.jsp"%>
<!-- 页面特殊加载的js -->
<script type="text/javascript"
	src="${ctx}/Resource/js/grid.locale-cn.js"></script>
<script type="text/javascript"
	src="${ctx}/Resource/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript"
	src="${ctx}/Resource/js/jquery.jqGrid.min.js"></script>
</head>
<body>
    <%@ include file="/Views/Common/top.jsp"%>
	<div class="container-fluid">
		<div class="row">
			<%@ include file="/Views/Common/navbar.jsp"%>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<h4 class="page-header">
					<i class="glyphicon glyphicon-home" style="padding: 10px"></i>客户流失分析
				</h4>
				<div class="container-fluid"
					style="border-radius: 5px; background: #f4f4f4; position: relative; margin: 10px, 10px, 10px, 10px; padding: 20px">
					<div class="row">
						<div class="col-md-4">
							<label class="label-block">客户名称</label> <input
								class=" form-control input-block" type="text">
						</div>
						<div class="col-md-4">
							<label class="label-block">客户经理</label> <input
								class=" form-control input-block" type="text">
						</div>
					</div>
				</div>
				<div class="right">
					<button type="button" class="btn btn-default">帮助</button>
					<button type="button" class="btn btn-info">查询</button>
				</div>
				<div style="clear:both"></div>
				<table id="grid-table"></table>
				<div id="grid-pager"></div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var grid_data = [ {
			id : "1",
			year : "2006",
			customer : "大空纶纺",
			customer_manager : "小满",
			loss_reason : "客户厂址迁移"
		},{
			id : "2",
			year : "2006",
			customer : "星星广告",
			customer_manager : "郭小美",
			loss_reason : "客户公司被收购"
		},{
			id : "3",
			year : "2005",
			customer : "和满记餐饮",
			customer_manager : "周结论",
			loss_reason : "没有采购需求"
		}];
	
		jQuery(function($) {
			var grid_selector = "#grid-table";
			var pager_selector = "#grid-pager";

			jQuery(grid_selector).jqGrid(
					{
						//direction: "rtl",

						data : grid_data,
						datatype : "local",
						colNames : [ '编号','年份', '客户', '客户经理', '流失原因'],
						colModel : [ {
							name : 'id',
							index : 'id',
							width : 20
						},{
							name : 'year',
							index : 'year',
							width : 70
						}, {
							name : 'customer',
							index : 'customer',
							width : 70
						}, {
							name : 'customer_manager',
							index : 'customer_manager',
							width : 90
						}, {
							name : 'loss_reason',
							index : 'loss_reason',
							width : 150
						}],

						viewrecords : true,
						rowNum : 10,
						rowList : [ 10, 20, 30 ],
						pager : pager_selector,
						altRows : true,
						multiselect : true,
						multiboxonly : true,

						loadComplete : function() {
							setTimeout(function() {
								doResize();
								//统一三个部分的宽度
								$(".ui-jqgrid-htable").attr("style",$(pager_selector).attr("style"));
								$(grid_selector).attr("style",$(pager_selector).attr("style"));
							}, 0);
						},
						shrinkToFit : true,
						autowidth : true,
						grouping : false,
						groupingView : {
							groupField : [ 'ship' ],
							groupColumnShow : [ true ],
							groupText : [ '<b>{0}共有{1}条记录</b>' ],
							groupOrder : [ 'desc' ]
						},
					});
			//navButtons
			jQuery(grid_selector).jqGrid('navGrid', pager_selector, { //navbar options
				edit : false,
				add : false,
				del : false,
				search : false,
				refresh : false,
				view : false,
			})
		});
	</script>
</body>
</html>